<template>
  <div class="content">
    <div class="search-box">
      <svg
        t="1652162358357"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1924"
        width="16"
        height="16"
        @click="goToSearch"
      >
        <path
          d="M474.453333 884.053333c-225.28 0-409.6-184.32-409.6-409.6s184.32-409.6 409.6-409.6 409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6z m0-68.266666c187.733333 0 341.333333-153.6 341.333334-341.333334s-153.6-341.333333-341.333334-341.333333-341.333333 153.6-341.333333 341.333333 153.6 341.333333 341.333333 341.333334z m252.586667 54.613333c-13.653333-13.653333-10.24-37.546667 3.413333-47.786667s37.546667-10.24 47.786667 3.413334l64.853333 78.506666c13.653333 13.653333 10.24 37.546667-3.413333 47.786667s-37.546667 10.24-47.786667-3.413333l-64.853333-78.506667z"
          p-id="1925"
        ></path>
      </svg>
      <input type="text" name="" id="" @click="goToSearch" />
      <div class="user-login" @click="goToLogin">登录</div>
    </div>
    <div class="scrTxt" @click="goToSearch">
      <van-swipe
        :autoplay="3000"
        indicator-color="transparent"
        style="height: 25px"
        vertical
        class="scrTxtItem"
        :height="50"
      >
        <van-swipe-item>新人9.9元包邮</van-swipe-item>
        <van-swipe-item>OPPO K10</van-swipe-item>
        <van-swipe-item>Find X5 Pro</van-swipe-item>
        <van-swipe-item>一加 Ace</van-swipe-item>
        <van-swipe-item>爆款耳机</van-swipe-item>
      </van-swipe>
    </div>
    <div class="scrpic">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img height="200px" width="375px" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="goodnav">
      <van-grid :column-num="5" :border="false" icon-size="45px" clickable>
        <van-grid-item
          icon="https://dsfs.oppo.com/archives/202112/2021121703125061bb9066a83fe.png?_w_=132&_h_=132&x-oss-process=image/format,webp"
          text="手机"
          to="/phone"
        />
        <van-grid-item
          icon="https://dsfs.oppo.com/archives/202202/20220218070247620f7ef38a3e9.png?_w_=132&_h_=132&x-oss-process=image/format,webp"
          text="平板电视"
        />
        <van-grid-item
          icon="https://dsfs.oppo.com/archives/202112/2021121703122061bb8f948897e.png?_w_=132&_h_=132&x-oss-process=image/format,webp"
          text="穿戴"
        />
        <van-grid-item
          icon="https://dsfs.oppo.com/archives/202112/2021121703120261bb90aec9a4a.png?_w_=132&_h_=132&x-oss-process=image/format,webp"
          text="声学"
        />
        <van-grid-item
          icon="https://dsfs.oppo.com/archives/202112/2021121704121061bba51a0fe2f.png?_w_=132&_h_=132&x-oss-process=image/format,webp"
          text="配件"
        />
      </van-grid>
    </div>
    <div class="body">
      <div class="goods1">
        <van-grid :border="true" :column-num="2" class="goodsItem" :gutter="7">
          <van-grid-item class="goodsItemBox">
            <van-image
              src="https://dsfs.oppo.com/archives/202205/20220513070543627e43f742d5c.png?_w_=496&_h_=306&x-oss-process=image/format,webp"
            />
          </van-grid-item>
          <van-grid-item class="goodsItemBox">
            <van-image
              src="https://dsfs.oppo.com/archives/202205/202205090505476278da5bc6687.png?_w_=496&_h_=306&x-oss-process=image/format,webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://dsfs.oppo.com/archives/202202/202202220502526214aa7c3092a.png?_w_=496&_h_=306&x-oss-process=image/format,webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://dsfs.oppo.com/archives/202204/20220428060424626a66306bb41.png?_w_=496&_h_=306&x-oss-process=image/format,webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://dsfs.oppo.com/archives/202205/202205090505576278daa13d1ab.png?_w_=496&_h_=306&x-oss-process=image/format,webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://dsfs.oppo.com/archives/202205/2022050505054962739a7579493.png?_w_=496&_h_=306&x-oss-process=image/format,webp"
            />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="goods2">
        <van-grid :border="true" :column-num="4" class="goodsItem" :gutter="7">
          <van-grid-item class="goodsItemBox">
            <van-image
              src="https://dsfs.oppo.com/archives/202205/20220513100520627dbbb48b415.png?_w_=240&_h_=306&x-oss-process=image/format,webp"
            />
          </van-grid-item>
          <van-grid-item class="goodsItemBox">
            <van-image
              src="https://dsfs.oppo.com/archives/202202/2022022408025662177e7cc9c6c.png?_w_=240&_h_=306&x-oss-process=image/format,webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://dsfs.oppo.com/archives/202204/20220408050445625006a1327c5.png?_w_=240&_h_=306&x-oss-process=image/format,webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://dsfs.oppo.com/archives/202204/20220408050415625006834c317.png?_w_=240&_h_=307&x-oss-process=image/format,webp"
            />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="countdown">
        <div class="countxt">
          <div class="countxt-left">今日必抢</div>
          <div class="time"><van-count-down class="" :time="time" /></div>
          <div class="countxt-right">后结束</div>
          <div class="countxt-box"></div>
          <div class="more">更多</div>
        </div>
      </div>
      <div class="must">
        <ul class="must-body">
          <li class="must-item" v-for="li in must2" :key="li.id">
            <img :src="li.url" alt="" />
            <div v-if="(li.thirdTitle = '')" class="must-tag">
              {{ li.thirdTitle }}
            </div>
            <div class="must-title">{{ li.title }}</div>
            <div class="must-price">
              <span class="nowPrice">￥{{ li.price }}</span>
              <span class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="mobile">
        <div class="bigTitle">{{ mobile.name }}</div>
        <div class="bigImg">
          <img :src="mobile.url" alt="" />
        </div>
        <ul class="mobile-body">
          <li class="mobile-item" v-for="li in mobile4" :key="li.id">
            <img class="mobile-img" :src="li.url" alt="" />
            <div class="mobile-title">{{ li.title }}</div>
            <div class="mobile-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="audio">
        <div class="bigTitle">{{ audio.name }}</div>
        <div class="bigImg">
          <img :src="audio.url" alt="" />
        </div>
        <ul class="audio-body">
          <li class="audio-item" v-for="li in audio2" :key="li.id">
            <img class="audio-img" :src="li.url" alt="" />
            <div class="audio-title">{{ li.title }}</div>
            <div class="audio-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span v-if="li.price" class="orgPrice">￥{{ li.price }}</span>
              <span v-else class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="wear">
        <div class="bigTitle">{{ wear.name }}</div>
        <div v-if="wear.url" class="bigImg">
          <img :src="wear.url" alt="" />
        </div>
        <ul class="wear-body">
          <li class="wear-item" v-for="li in wear2" :key="li.id">
            <img class="wear-img" :src="li.url" alt="" />
            <div class="wear-title">{{ li.title }}</div>
            <div class="wear-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span v-if="li.price" class="orgPrice">￥{{ li.price }}</span>
              <span v-else class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="digital">
        <div class="bigTitle">{{ digital.name }}</div>
        <div v-if="digital.url" class="bigImg">
          <img :src="digital.url" alt="" />
        </div>
        <ul class="digital-body">
          <li class="digital-item" v-for="li in digital2" :key="li.id">
            <img class="digital-img" :src="li.url" alt="" />
            <div class="digital-title">{{ li.title }}</div>
            <div class="digital-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span v-if="li.price" class="orgPrice">￥{{ li.price }}</span>
              <span v-else class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="tv">
        <div class="bigTitle">{{ tv.name }}</div>
        <div class="bigImg">
          <img :src="tv.url" alt="" />
        </div>
        <ul class="tv-body">
          <li class="tv-item" v-for="li in tv2" :key="li.id">
            <img class="tv-img" :src="li.url" alt="" />
            <div class="tv-title">{{ li.title }}</div>
            <div class="tv-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span v-if="li.price" class="orgPrice">￥{{ li.price }}</span>
              <span v-else class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="health">
        <div class="bigTitle">{{ health.name }}</div>
        <div v-if="health.url" class="bigImg">
          <img :src="health.url" alt="" />
        </div>
        <ul class="health-body">
          <li class="health-item" v-for="li in health2" :key="li.id">
            <img class="health-img" :src="li.url" alt="" />
            <div class="health-title">{{ li.title }}</div>
            <div class="health-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span v-if="li.price" class="orgPrice">￥{{ li.price }}</span>
              <span v-else class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="part">
        <div class="bigTitle">{{ part.name }}</div>
        <div v-if="part.url" class="bigImg">
          <img :src="part.url" alt="" />
        </div>
        <ul class="part-body">
          <li class="part-item" v-for="li in part2" :key="li.id">
            <img class="part-img" :src="li.url" alt="" />
            <div class="part-title">{{ li.title }}</div>
            <div class="part-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span v-if="li.price" class="orgPrice">￥{{ li.price }}</span>
              <span v-else class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="life">
        <div class="bigTitle">{{ life.name }}</div>
        <div v-if="life.url" class="bigImg">
          <img :src="life.url" alt="" />
        </div>
        <ul class="life-body">
          <li class="life-item" v-for="li in life2" :key="li.id">
            <img class="life-img" :src="li.url" alt="" />
            <div class="life-title">{{ li.title }}</div>
            <div class="life-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span v-if="li.price" class="orgPrice">￥{{ li.price }}</span>
              <span v-else class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="device">
        <div class="bigTitle">{{ device.name }}</div>
        <div v-if="device.url" class="bigImg">
          <img :src="device.url" alt="" />
        </div>
        <ul class="device-body">
          <li class="device-item" v-for="li in device2" :key="li.id">
            <img class="device-img" :src="li.url" alt="" />
            <div class="device-title">{{ li.title }}</div>
            <div class="device-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span v-if="li.price" class="orgPrice">￥{{ li.price }}</span>
              <span v-else class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="moregd">
        <div class="bigTitle">{{ moregd.name }}</div>
        <div v-if="moregd.url" class="bigImg">
          <img :src="moregd.url" alt="" />
        </div>
        <ul class="moregd-body">
          <li class="moregd-item" v-for="li in moregd2" :key="li.id">
            <img class="moregd-img" :src="li.url" alt="" />
            <div class="moregd-title">{{ li.title }}</div>
            <div class="moregd-price">
              <span class="nowPrice">{{ li.pricePrefix }}</span>
              <span v-if="li.price" class="orgPrice">￥{{ li.price }}</span>
              <span v-else class="orgPrice">￥{{ li.originalPrice }}</span>
            </div>
          </li>
        </ul>
      </div>
      <footer>
        <div class="download">
          <svg
            t="1652260497104"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4781"
            width="24"
            height="24"
          >
            <path
              d="M256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m0 64a53.333333 53.333333 0 0 0-53.333333 53.333334v618.666666a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256z m170.666667 618.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z"
              p-id="4782"
            ></path></svg
          >下载APP
        </div>
        <div class="login" @click="goToLogin">
          <svg
            t="1652260601142"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8998"
            width="24"
            height="24"
          >
            <path
              d="M716.8 691.2c-14.08 0-25.6 11.52-25.6 25.6v153.6c0 56.32-46.08 102.4-102.4 102.4H153.6c-56.32 0-102.4-46.08-102.4-102.4V153.6c0-56.32 46.08-102.4 102.4-102.4h435.2c56.32 0 102.4 46.08 102.4 102.4v153.6c0 14.08 11.52 25.6 25.6 25.6s25.6-11.52 25.6-25.6V153.6c0-84.48-69.12-153.6-153.6-153.6H153.6C69.12 0 0 69.12 0 153.6v716.8c0 84.48 69.12 153.6 153.6 153.6h435.2c84.48 0 153.6-69.12 153.6-153.6V716.8c0-14.08-11.52-25.6-25.6-25.6z"
              fill="#333333"
              p-id="8999"
            ></path>
            <path
              d="M998.4 486.4H500.48l119.04-119.04c10.24-10.24 10.24-25.6 0-35.84-10.24-10.24-25.6-10.24-35.84 0L439.04 476.16c-8.96 7.68-12.8 19.2-14.08 30.72v7.68c0 12.8 6.4 25.6 15.36 34.56l144.64 144.64c5.12 5.12 11.52 7.68 17.92 7.68s12.8-2.56 17.92-7.68c10.24-10.24 10.24-25.6 0-35.84L500.48 537.6H998.4c14.08 0 25.6-11.52 25.6-25.6s-11.52-25.6-25.6-25.6z"
              fill="#333333"
              p-id="9000"
            ></path></svg
          >登录账号
        </div>
      </footer>
      <div class="copyright">
        <ul>
          <li>营业执照</li>
          <li>隐私政策</li>
          <li>用户协议</li>
        </ul>
        <div class="bottom">©2005 - 2022 OPPO 版权所有 粤ICP备14056724号</div>
      </div>
    </div>
    <footer></footer>
  </div>
</template>

<script>
import Home from "@/views/Home.vue";
import Vue from "vue";
import { Swipe, SwipeItem, Lazyload } from "vant";
import { Grid, GridItem, Image } from "vant";
import { CountDown } from "vant";
// import axios from "@/api/instance";

Vue.use(CountDown);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Image);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);

export default {
  components: {
    Home,
  },
  data() {
    return {
      images: [
        "https://dsfs.oppo.com/archives/202205/202205090605196278edefc38cb.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp",
        "https://dsfs.oppo.com/archives/202205/202205050505026273968601e33.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp",
        "https://dsfs.oppo.com/archives/202204/20220428050441626a60297a957.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp",
        "https://dsfs.oppo.com/archives/202205/202205090505556278d883efbad.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp",
        "https://dsfs.oppo.com/archives/202205/20220512050510627cda3281336.png?_w_=1080&_h_=600&x-oss-process=image/format,webp",
        "https://dsfs.oppo.com/archives/202204/2022041303044262567e02de5bc.png?_w_=1080&_h_=600&x-oss-process=image/format,webp",
      ],
      time: 12 * 60 * 60 * 1000,
      navitem: [],
      goodList: [],
      must: [],
      must2: [],
      res3: [],
      mobile: [],
      mobile2: [],
      mobile3: [],
      mobile4: [],
      audio: [],
      audio2: [],
      wear: [],
      wear2: [],
      digital: [],
      digital2: [],
      tv: [],
      tv2: [],
      health: [],
      health2: [],
      part: [],
      part2: [],
      life: [],
      life2: [],
      device: [],
      device2: [],
      moregd: [],
      moregd2: [],
    };
  },
  methods: {
    async loadData() {
      // let result = await axios.get("/must.json");
      // console.log("商品数据：", result);
      // this.goodList = result.cinemas;
      // console.log("影院名称：", result.cinemas);
      // this.hasMore = !!result?.paging?.hasMore;
      // this.cinemaList = [...this.cinemaList, ...result.cinemas];
    },
    goToLogin: function () {
      this.$router.push("/login");
    },
    goToSearch: function () {
      this.$router.push("/search");
    },
  },
  created() {
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res2) => {
      console.log("res2 ==>", res2);
      this.must = res2.data[1];
      this.must2 = this.must.productDetailss;
      // console.log("今日必抢数据列表：", this.must);
      // console.log("今日必抢详细数据: ", this.must2);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res3) => {
      console.log("res3 ==>", res3);
      this.mobile = res3.data[2];
      this.mobile2 = res3.data[2].name;
      this.mobile3 = res3.data[2].url;
      this.mobile4 = this.mobile.productDetailss;
      // console.log("手机专区数据列表：", this.mobile);
      // console.log("手机专区大标题：", this.mobile2);
      // console.log("手机专区大图片：", this.mobile3);
      // console.log("手机专区详细数据: ", this.mobile4);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res4) => {
      console.log("res4 ==>", res4);
      this.audio = res4.data[3];
      this.audio2 = this.audio.productDetailss;
      // console.log("智能声学数据列表：", this.audio);
      // console.log("智能声学详细数据: ", this.audio2);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res5) => {
      console.log("res5 ==>", res5);
      this.wear = res5.data[4];
      this.wear2 = this.wear.productDetailss;
      // console.log("智能穿戴数据列表：", this.wear);
      // console.log("智能穿戴详细数据: ", this.wear2);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res6) => {
      console.log("res6 ==>", res6);
      this.digital = res6.data[5];
      this.digital2 = this.digital.productDetailss;
      // console.log("数码周边数据列表：", this.digital);
      // console.log("数码周边详细数据: ", this.digital2);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res6) => {
      console.log("res6 ==>", res6);
      this.tv = res6.data[6];
      this.tv2 = this.tv.productDetailss;
      // console.log("平板/电视数据列表：", this.tv);
      // console.log("平板/电视详细数据: ", this.tv2);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res7) => {
      console.log("res7 ==>", res7);
      this.health = res7.data[7];
      this.health2 = this.health.productDetailss;
      // console.log("运动健康数据列表：", this.health);
      // console.log("运动健康详细数据: ", this.health2);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res8) => {
      console.log("res8 ==>", res8);
      this.part = res8.data[8];
      this.part2 = this.part.productDetailss;
      // console.log("手机配件数据列表：", this.part);
      // console.log("手机配件详细数据: ", this.part2);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res9) => {
      console.log("res9 ==>", res9);
      this.life = res9.data[9];
      this.life2 = this.life.productDetailss;
      // console.log("生活日用数据列表：", this.life);
      // console.log("生活日用详细数据: ", this.life2);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res10) => {
      console.log("res10 ==>", res10);
      this.device = res10.data[10];
      this.device2 = this.device.productDetailss;
      // console.log("家用电器数据列表：", this.device);
      // console.log("家用电器详细数据: ", this.device2);
    });
    this.$axios.get("/cn/oapi/goods/web/products/v15/040204").then((res11) => {
      console.log("res11 ==>", res11);
      this.moregd = res11.data[11];
      this.moregd2 = this.moregd.productDetailss;
      // console.log("更多好物数据列表：", this.moregd);
      // console.log("更多好物详细数据: ", this.moregd2);
    });
  },
  async mounted() {
    await this.loadData();
  },
};
</script>

<style lang="scss" scoped>
.content {
  .search-box {
    width: 10rem;
    position: absolute;
    z-index: 998;
    height: 46px;
    background: white;
    // margin: 0.2rem 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-pack: start;
    justify-content: flex-start;
    .icon {
      position: absolute;
      top: 0.4rem;
      left: 0.5rem;
      z-index: 999;
    }
    input {
      margin-top: 7px;
      text-indent: 0.75rem;
      outline: none;
      border: none;
      height: 33px;
      margin-left: 0.3rem;
      line-height: 0.66rem;
      background: #f7f8fa;
      border-radius: 0.09rem;
      opacity: 0.9;
    }
    .user-login {
      margin-left: 0.4rem;
      width: 1.04rem;
      color: #333;
      font-weight: 500;
      font-size: 15px;
      align-self: center;
      text-align: center;
    }
  }
  .scrTxt {
    position: absolute;
    top: 0.45rem;
    left: 1.2rem;
    z-index: 999;
    .van-swipe-item {
      font-size: 13px;
      color: #b2b2b2;
    }
  }
  .scrpic {
    // margin-top: -46px;
    width: 10rem;
    // height: 100px;
  }
  .goodnav {
    .van-icon .van-grid-item__icon {
      font-size: 36px;
    }
    .van-grid-item__content {
      .van-grid-item__content--center {
        .van-grid-item__content--clickable {
          height: 100px;
        }
      }
    }
    img {
      width: 36px;
      height: 36px;
    }
  }
  .body {
    background-color: #f7f8fa;
    .goods1 {
      .goodsItem {
        margin: 0.15rem;
      }
      .goodsItemBox {
        margin-top: 0.3rem;
        .van-grid-item__content
          .van-grid-item__content--center
          .van-grid-item__content--surround
          .van-hairline {
          padding: 0;
        }
      }
    }
    .goods2 {
      .goodsItem {
        margin: 0.1rem;
        margin-bottom: 0.75rem;
      }
      .goodsItemBox {
        // margin-top: 0.3rem;
      }
    }
    .countdown {
      .countxt {
        margin-left: 0.2rem;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        line-height: 0.6rem;
        .countxt-left {
          color: #000000;
          font-weight: 500;
          font-size: 15px;
        }
        .time {
          .van-count-down {
            color: red;
            margin-left: 0.2rem;
            text-align: center;
          }
        }
        .countxt-right {
          color: rgba(0, 0, 0, 0.3);
          font-weight: 400;
          font-size: 0.26rem;
        }
        .countxt-box {
          -webkit-box-pack: justify;
          justify-content: space-between;
          height: 0.6rem;
          margin: 0 2.25rem;
          line-height: 0.6rem;
        }
        .more {
          color: rgba(0, 0, 0, 0.3);
          font-weight: 400;
          font-size: 0.26rem;
        }
      }
    }
    .must {
      height: 150px;
      width: 350px;
      background-color: #fff;
      margin: 0.3rem 0.3rem;
      overflow-y: auto;
      .must-body {
        display: flex;
        width: 100px;
        height: 150px;
        .must-item {
          position: relative;
          img {
            width: 92px;
            height: 92px;
          }
          .must-tag {
            position: absolute;
            bottom: 1.6rem;
            left: 25%;
            box-sizing: initial;
            max-width: 100%;
            word-break: keep-all;
            background: linear-gradient(228deg, #ff6363, #ff9339);
            display: inline-block;
            box-sizing: initial;
            max-width: 100em;
            height: 0.4rem;
            padding: 0 0.06rem;
            overflow: hidden;
            color: #fff;
            font-size: 0.2rem;
            line-height: 0.4rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            border-radius: 0.04rem;
          }

          .must-title {
            width: 100px;
            overflow: hidden;
            color: #000;
            font-weight: 400;
            font-size: 0.36rem;
            white-space: nowrap;
            text-align: center;
            text-overflow: ellipsis;
          }

          .must-price {
            margin-top: -0.3rem;
            margin-left: -0.8rem;
            .nowPrice {
              color: rgb(0, 0, 0);
              font-size: 0.36rem;
              // width: 151%;
              // line-height: normal;
            }

            .orgPrice {
              font-size: 0.26rem;
              color: rgba(0, 0, 0, 0.3);
              text-decoration: line-through;
            }
          }
        }
      }
    }
    .colon {
      display: inline-block;
      margin: 0 4px;
      color: #ee0a24;
    }
    .block {
      display: inline-block;
      width: 22px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background-color: #ee0a24;
    }
  }
  .mobile {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      float: left;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .mobile-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;
      .mobile-item {
        width: 33%;
        background-color: #fff;
        .mobile-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .mobile-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .mobile-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            text-align-last: left;
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  .audio {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      float: left;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .audio-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;
      :nth-last-child(2) {
        display: none;
      }
      .audio-item {
        width: 33%;
        background-color: #fff;
        .audio-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .audio-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .audio-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  .wear {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      // float: left;
      position: relative;
      left: -150px;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .wear-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;

      .wear-item {
        width: 33%;
        background-color: #fff;
        .wear-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .wear-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .wear-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  .digital {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      // float: left;
      position: relative;
      left: -150px;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .digital-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;

      .digital-item {
        width: 33%;
        background-color: #fff;
        .digital-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .digital-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .digital-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  .tv {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      float: left;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .tv-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;
      .tv-item {
        width: 33%;
        background-color: #fff;
        .tv-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .tv-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .tv-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  .health {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      // float: left;
      position: relative;
      left: -150px;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .health-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;

      .health-item {
        width: 33%;
        background-color: #fff;
        .health-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .health-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .health-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  .part {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      // float: left;
      position: relative;
      left: -150px;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .part-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;
      :nth-last-child(2) {
        display: none;
      }
      .part-item {
        width: 33%;
        background-color: #fff;
        .part-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .part-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .part-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  .life {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      // float: left;
      position: relative;
      left: -150px;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .life-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: Fnormal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;

      .life-item {
        width: 33%;
        background-color: #fff;
        .life-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .life-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .life-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  .device {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      // float: left;
      position: relative;
      left: -150px;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .device-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: Fnormal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;
      :nth-last-child(2) {
        display: none;
      }
      .device-item {
        width: 33%;
        background-color: #fff;
        .device-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .device-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .device-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  .moregd {
    .bigTitle {
      margin-top: 0.3rem;
      margin-left: 0.2rem;
      margin-bottom: 0.2rem;
      font-weight: 500;
      font-size: 0.4rem;
      line-height: 0.6rem;
      // float: left;
      position: relative;
      left: -150px;
    }
    .bigImg {
      img {
        height: 105px;
        width: 350px;
      }
    }
    .moregd-body {
      margin: 0 0.3rem;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: Fnormal;
      flex-direction: row;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: space-between;

      .moregd-item {
        width: 33%;
        background-color: #fff;
        .moregd-img {
          display: block;
          width: 100%;
          // height: 100%;
          margin-bottom: 0.2rem;
        }
        .moregd-title {
          padding: 0 0.1rem;
          color: #000;
          font-weight: 400;
          font-size: 0.26rem;
          line-height: 0.39rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .moregd-price {
          .nowPrice {
            margin-right: 0.04rem;
            color: rgb(0, 0, 0);
            font-size: 0.2rem;
            width: 151%;
            height: 0.3939rem;
            line-height: normal;
          }
          .orgPrice {
            font-size: 0.3939rem;
            font-size: 0.26rem;
            line-height: 1;
          }
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  footer {
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 13px;
    background-color: #fff;
    .icon {
      margin-bottom: -0.15rem;
    }
    .download {
    }
    .login {
    }
  }
  .copyright {
    background-color: #fff;
    ul {
      padding-top: 0.5rem;
      background-color: #fff;
      display: flex;
      justify-content: space-evenly;
      font-size: 12px;
      color: #666666;
    }
    .bottom {
      margin-top: 0.25rem;
      font-size: 12px;
      color: #666666;
      margin-bottom: 2rem;
    }
  }
}
</style>